<template>
  <div>
      <div v-for="(item,index) in infoData.factorInfoList" :key="index">
            <div class="table-row display-fx-center">
                <div class="tr per100 display-fx-center">
                    <div class="td" style="width:154px">
                          <span>接触危害因素类别</span>
                    </div>
                    <div class="full" style="border-right:none">
                          {{item.type}}  
                    </div>
                </div>
                <div class="tr display-fx-center" style="width:300px;flex-shrink: 0;">
                    <div class="td" style="width:161px">
                          <span>{{item.type}}接触总人数</span>
                    </div>
                    <div class="full">
                        {{item.contactPersonnelNum}}  
                    </div>
                </div>
            </div>

          <el-table :data="item.factorList" border >
                  <el-table-column label="接触危害因素" align="left" prop="factor" width="822" />
                  <el-table-column label="接触人数" align="center" prop="contactPersonnelNum" />
          </el-table>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
            
      };
    },
    props:{
      infoData:{
          type:Object,
          default:()=>{}
        },     
     },
    created() {

    },
    methods: {

    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .per100{
             width: 100%!important;
          }
          .per33{
              width: 33.333333333%!important;
          }
          .table-row{
                font-size: 14px;
                .tr{
                    width: 50%;
                    height: 60px;
                    display: flex;
                    .td{
                      text-align: right;
                      width: 161px;
                      height: 100%;
                      border: solid 1px #dfe6ec;
                      color: #797C84;
                      background-color:#F4F8FF;
                      border-top:none;
                      border-right:none;
                      padding: 8px;
                      flex-shrink: 0;
                      @extend .display-fx-center;
                  }
                  .full{
                        width: 100%;
                        height: 100%;
                        line-height: 60px;
                        border: solid 1px #dfe6ec;
                        border-top:none;
                        padding: 0 10px;
                        @extend .display-fx-center;
                        
                    }
                } 
  
          }


           ::v-deep{
            .el-table__header-wrapper th{
                 background: #F4F8FF!important; 
                 text-align: center!important;   
           }
          //  鼠标移入表格行不变色
          .el-table .el-table__row:hover td {
            background-color: transparent !important;
          }
          .el-table--border{
                 border-top:none!important;
           }
           .has-gutter .el-table__cell{
                  padding: 13px 0!important;    
           }
            .el-table__row .el-table__cell{
                 padding: 18px 0!important;
           }
        }

</style>
